<template>
  <div class="event-detail">
    <h2>{{ event.title }}</h2>
    <div class="meta">
      <span :class="['status', event.status === 1 ? 'completed' : 'pending']">
        {{ event.status === 1 ? '已完成' : '待办' }}
      </span>
      <span class="time">{{ formatDate(event.create_time) }}</span>
    </div>
    <div class="content-box">
  <img v-if="event.image" :src="event.image" alt="事件图片" class="event-image">
  <div class="content">{{ event.content }}</div>
</div>
    <div class="actions">
      <button @click="editEvent" class="edit-btn">编辑</button>
      <button @click="deleteEvent" class="delete-btn">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      event: {}
    }
  },
  async created() {
    try {
      const token = localStorage.getItem('token');
      const response = await fetch(`/api/events/${this.$route.params.id}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });
      
      if (response.ok) {
        this.event = await response.json();
      } else {
        this.$router.push('/login');
      }
    } catch (error) {
      console.error('获取事件详情错误:', error);
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString();
    },
    editEvent() {
      this.$router.push(`/events/${this.event.id}/edit`);
    },
    async deleteEvent() {
      if (confirm('确定要删除这个事件吗？')) {
        try {
          const token = localStorage.getItem('token');
          const response = await fetch(`/api/events/${this.event.id}`, {
            method: 'DELETE',
            headers: {
              'Authorization': `Bearer ${token}`
            }
          });
          
          if (response.ok) {
            this.$router.push('/events');
          }
        } catch (error) {
          console.error('删除事件错误:', error);
        }
      }
    }
  }
}
</script>

<style scoped>
.event-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.meta {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #666;
}
.status {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}
.status.pending {
  background-color: #ffeb3b;
  color: #333;
}
.status.completed {
  background-color: #4caf50;
  color: white;
}
.content-box {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.event-image {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 15px;
}
.content {
  padding: 10px 0;
  line-height: 1.6;
}
.actions {
  margin-top: 20px;
}
button {
  padding: 8px 15px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.edit-btn {
  background-color: #2196f3;
  color: white;
}
.delete-btn {
  background-color: #f44336;
  color: white;
}
</style>